<script setup lang="ts">

import Taro from "@tarojs/taro";
import ApiUser from "@/api/user";

import ByCell from "@/components/ui/ByCell.vue";
import Page from "@/components/common/Page.vue";
import ByButton from "@/components/ui/ByButton.vue";
import UploaderImage from "@/components/common/UploaderImage.vue";
import ContentBox from "@/pages/index/components/ContentBox.vue";

import useForm from "@/hooks/useForm";
import useApp from "@/stores/app";



// //launch-advisor-oss.oss-cn-guangzhou.aliyuncs.com/selection/20241005/6ee5a638baa94cdaaa97648c9797c481.png

const stateApp = useApp();

const { loading, model, submit } = useForm(ApiUser.updateUserInfo, {
  defaultModel: { ...stateApp.userInfo },
  rules: {
    avatar: { required: true, message: "请上传头像" },
    nickname: { required: true, message: "请填写昵称" },
  },

  onSuccess() {
    Taro.showToast({ title: "操作成功" });
    setTimeout(() => {
      Taro.navigateBack({ delta: 1 });
    }, 1500);
  },
});


</script>

<template>

  <Page height="200rpx">

    <ContentBox class="mt-6">
      <view class="px-6 pb-6">
        <ByCell label="头像">
          <view class="text-right">

            <view class="inline-block relative">
              <UploaderImage avatar
                             v-model="model.avatar"
                             :size="120" />
              <view v-if="model.avatar"
                    class="absolute bottom-0 py-0.5 px-2 whitespace-pre bg-black/50 text-white/80 rounded-md text-xs z-10">
                点击修改
              </view>
            </view>
          </view>
        </ByCell>

        <ByCell label="昵称">
          <input v-model="model.nickname"
                 type="nickname"
                 class="h-[92px] leading-[92px] text-right" />
        </ByCell>
        <ByCell label="手机号">
          <input :disabled="true"
                 :value="stateApp.userInfo?.mobile"
                 class="h-[92px] leading-[92px] text-right" />
        </ByCell>


        <ByButton block
                  type="primary"
                  class="mt-5.5"
                  :loading="loading"
                  @tap="submit">保存</ByButton>

      </view>
    </ContentBox>
  </Page>
</template>
